// Array.prototype.insert = function (index, item) {
//   this.splice(index, 0, item)
// }
export const setMenu = (className, len, f) => {
  let ulClassName = className
  let doms = document.getElementsByTagName('*')
  let ul = document.createElement('ul')
  ul.id = 'ulHidden'
  ul.style.position = 'absolute'
  ul.style.top = '60px'
  ul.style.left = '0'
  ul.style.zIndex = '130'
  ul.style.display = 'none'
  ul.style.padding = '2px'
  ul.style.color = 'white'
  ul.style.borderRadius = '4px'
  let elements = []
  for (let i = 0; i < doms.length; i++) {
    let classNames = doms[i].className.split(' ')
    for (let j = 0; j < classNames.length; j++) {
      if (classNames[j] === ulClassName) {
        elements.push(doms[i])
        break
      }
    }
    if (elements.length > 0) break
  }
  let lis = elements[0].childNodes
  let liLength = lis.length - 2
  if (liLength > len) {
    for (let k = 0; k < liLength; k++) {
      if (k > len - 1) {
        let liList = document.createElement('li')
        liList.innerText = lis[k].innerText
        liList.role = lis[k].role
        liList.key = k
        liList.style.display = 'block'
        liList.style.lineHeight = '40px'
        liList.style.width = '140px'
        liList.style.paddingLeft = '6px'
        liList.addEventListener('mouseover', function () {
          this.style.backgroundColor = '#66b1ff'
        })
        liList.addEventListener('mouseleave', function () {
          this.style.backgroundColor = '#409EFF'
        })
        ul.appendChild(liList)
        lis[k].style.display = 'none'
        if (k === (liLength - 1)) {
          ul.style.border = '2px solid rgb(255, 255, 255)'
          ul.style.backgroundColor = '#409EFF'
          let newEm = document.createElement('em')
          newEm.className = 'iconfont el-icon-extend-caidan4'
          newEm.style.fontSize = '20px'
          let newLi = document.createElement('li')
          newLi.style.position = 'relative'
          newLi.style.color = 'white'
          newLi.className = 'el-menu-item'
          newLi.appendChild(newEm)
          newLi.appendChild(ul)
          newLi.addEventListener('mouseover', function () {
            this.style.backgroundColor = 'rgb(51, 126, 204)'
            ul.style.display = 'block'
          })
          newLi.addEventListener('mouseleave', function () {
            this.style.backgroundColor = 'rgb(64, 158, 255)'
            ul.style.display = 'none'
          })
          elements[0].insertBefore(newLi, lis[k])
          break
        }
      }
    }
  }
}

export const setCurrentMenuStyle = menuInfo => {
  let key = menuInfo.key
  let menuClassName = menuInfo.className
  let doms = document.getElementsByTagName('*')
  let elements = []
  for (let i = 0; i < doms.length; i++) {
    let classNames = doms[i].className.split(' ')
    for (let j = 0; j < classNames.length; j++) {
      if (classNames[j] === menuClassName) {
        elements.push(doms[i])
        break
      }
    }
    if (elements.length > 0) break
  }
  let menuObj = elements[0]
  if (key > 0) {
    menuObj.childNodes[0].style.color = 'rgb(255, 255, 255)'
    menuObj.childNodes[0].style.borderBottomColor = 'transparent'
    menuObj.childNodes[0].style.backgroundColor = 'rgb(64, 158, 255)'
  }
  menuObj.childNodes[key].style.color = 'rgb(255, 208, 75)'
  menuObj.childNodes[key].style.borderBottomColor = 'rgb(255, 208, 75)'
  menuObj.childNodes[key].style.backgroundColor = 'rgb(64, 158, 255)'
}

export const clearPrevMenuStyle = keysInfo => {
  let prevMenuKey = keysInfo.prevKey
  let className = 'el-menu-demo'
  let doms = document.getElementsByTagName('*')
  let elements = []
  for (let i = 0; i < doms.length; i++) {
    let classNames = doms[i].className.split(' ')
    for (let j = 0; j < classNames.length; j++) {
      if (classNames[j] === className) {
        elements.push(doms[i])
        break
      }
    }
    if (elements.length > 0) break
  }
  let menuObj = elements[0]
  if (!keysInfo.isActiveClassName) {
    if (parseInt(keysInfo.currentKey) === parseInt(0)) {
      menuObj.childNodes[0].style.color = 'rgb(255, 208, 75)'
      menuObj.childNodes[0].style.borderBottomColor = 'rgb(255, 208, 75)'
      menuObj.childNodes[0].style.backgroundColor = 'rgb(64, 158, 255)'
    }
    menuObj.childNodes[prevMenuKey].style.color = 'rgb(255, 255, 255)'
    menuObj.childNodes[prevMenuKey].style.borderBottomColor = 'transparent'
    menuObj.childNodes[prevMenuKey].style.backgroundColor = 'rgb(64, 158, 255)'
  } else {
    for (let i = 0; i < menuObj.childNodes.length; i++) {
      if (!menuObj.childNodes[i].classList.contains(keysInfo.isActiveClassName)) menuObj.childNodes[prevMenuKey].classList.add()
    }
  }
}
export const getElementsByClass = clName => {
  let doms = document.getElementsByTagName('*')
  if (doms) {
    let elements = []
    for (let i = 0; i < doms.length; i++) {
      let classNames = doms[i].className.split(' ')
      for (let j = 0; j < classNames.length; j++) {
        if (classNames[j] === clName) {
          elements.push(doms[i])
          break
        }
      }
    }
    return elements
  }
}
